<template>
    <Header></Header>
            <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                <div class="mb-1 w-full font-medium p-5 bg-transparent dark:bg-transparent flex flex-col items-center justify-center">
                        <div class="mb-6 text-center font-bold text-4xl uppercase dark:text-white">
                     标签墙
                </div>
                        <!-- 标签云容器 -->
                        <div class="tag-cloud text-center py-6 relative">
                            <!-- 标签列表，添加动画类 -->
                            <div 
                                @click="goTagArticleListPage(item.id, item.name)" 
                                v-for="(item, index) in processedTags" 
                                :key="index"
                                :class="['inline-flex items-center font-medium mr-3 mb-0.5 px-8 py-2 text-center cursor-pointer transition-all duration-500 transform hover:scale-110 hover:shadow-lg rounded-md', getItemClass(item), 'fade-in']"
                                :style="{ fontSize: getItemFontSize(item), animationDelay: index * 50 + 'ms' }"
                            >

                              <svg t="1757665301821" class="icon w-4 h-4 mr-1.5" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7413">
                                <path d="M517.339429 649.069714l-22.820572-0.219428 18.432-109.568-111.177143 93.622857-19.017143-22.674286L480.548571 528.091429l-88.210285-0.585143 3.803428-22.674286 145.188572 1.243429z" fill="#6b7280" p-id="7414">
                                </path>
                                <path d="M961.462857 20.553143a148.845714 148.845714 0 0 0-74.825143-19.748572 155.794286 155.794286 0 0 0-104.594285 40.009143c-49.371429 44.763429-76.8 105.325714-98.742858 164.132572l-2.56 6.802285-103.424-18.358857a102.4 102.4 0 0 0-19.602285-1.609143c-28.964571 0-59.757714 9.508571-80.603429 25.161143l-438.857143 327.972572c-20.845714 15.579429-34.011429 38.034286-37.449143 63.195428-3.364571 25.161143 3.657143 50.176 19.602286 70.363429l218.770286 275.529143a97.28 97.28 0 0 0 77.824 37.010285c21.796571 0 42.422857-6.802286 59.538286-19.748571l438.930285-327.972571c26.404571-19.821714 46.372571-56.027429 48.566857-88.429715l15.433143-223.963428 2.998857-2.340572c49.590857-37.595429 117.540571-95.597714 135.972572-163.986285 16.384-59.026286-5.632-114.176-57.051429-144.018286z m-163.401143 522.971428l-0.146285 0.585143a46.445714 46.445714 0 0 1-8.996572 16.969143l-0.438857 0.438857-484.278857 361.691429-237.348572-299.154286L550.546286 262.582857l0.365714-0.146286A49.517714 49.517714 0 0 1 570.514286 257.462857h1.609143l98.962285 17.554286-2.925714 10.020571c-4.242286 13.824-7.826286 26.843429-11.044571 39.424-1.170286 4.608-1.828571 9.801143-2.998858 17.554286l-0.438857 3.437714-2.56 2.413715a63.561143 63.561143 0 0 0-21.577143 38.546285c-2.194286 15.798857-2.048 25.453714 8.996572 39.424 12.580571 15.798857 22.747429 19.602286 41.764571 18.578286 14.994286-0.731429 28.233143-3.218286 36.425143-20.553143 8.338286-17.554286 12.580571-35.035429 5.778286-52.443428l-4.022857-5.339429 1.828571-9.435429c0.585143-4.169143 4.388571-12.8 6.363429-18.212571 5.412571-15.140571 5.997714-20.187429 10.971428-36.571429l2.413715-8.045714 80.603428 9.069714-22.601143 240.493715z m163.84-428.178285c-9.874286 36.425143-47.835429 81.773714-112.859428 134.363428l-5.997715 5.046857-6.948571-3.657142a117.686857 117.686857 0 0 0-34.230857-11.702858l-43.958857-7.826285 4.973714-12.8c19.017143-48.274286 46.592-108.617143 90.404571-148.406857 14.628571-13.165714 33.645714-20.553143 53.394286-20.553143 12.946286 0 25.6 3.145143 35.547429 8.996571 20.260571 11.776 26.624 30.134857 19.602285 56.539429z" fill="#6b7280" p-id="7415">
                                </path>
                              </svg>

                                {{ item.name }}
                            </div>
                        </div>
                    </div>
        </div>
    <Footer></Footer>
</template>

<script setup>
import Header from '@/layouts/components/Header.vue'
import Footer from '@/layouts/components/Footer.vue'
import { useRouter } from 'vue-router'
import { getTags } from '@/api/frontend/tag'
import { ref, computed } from 'vue'

const router = useRouter()
const goTagArticleListPage = (id, name) => {
    router.push({path: '/tag/list', query: {id: id, name: name}})
}
const tags = ref([])

getTags().then((e) => {
    if (e.success) {
        tags.value = e.data.map(tag => ({
            ...tag,
            count: Math.floor(Math.random() * 20) + 1
        }))
    }
})
// 处理后的标签数据
const processedTags = computed(() => {
    return tags.value.map(tag => ({
        ...tag,
    }))
})

// 返回增大的字体大小
const getItemFontSize = (item) => {
    return '1.2rem'
}
// 根据标签使用次数获取样式类
const getItemClass = (item) => {
    // 根据count值确定颜色范围
    const minCount = 1
    const maxCount = Math.max(...processedTags.value.map(t => t.count), 20)
    const ratio = (item.count - minCount) / (maxCount - minCount)
    
    // 定义不同颜色主题
    const colors = [
        'bg-blue-100 text-blue-800 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-300',
        'bg-green-100 text-green-800 hover:bg-green-200 dark:bg-green-900 dark:text-green-300',
        'bg-purple-100 text-purple-800 hover:bg-purple-200 dark:bg-purple-900 dark:text-purple-300',
        'bg-yellow-100 text-yellow-800 hover:bg-yellow-200 dark:bg-yellow-900 dark:text-yellow-300',
        'bg-red-100 text-red-800 hover:bg-red-200 dark:bg-red-900 dark:text-red-300',
        'bg-indigo-100 text-indigo-800 hover:bg-indigo-200 dark:bg-indigo-900 dark:text-indigo-300',
        'bg-pink-100 text-pink-800 hover:bg-pink-200 dark:bg-pink-900 dark:text-pink-300'
    ]
    
    // 根据比率选择颜色
    const colorIndex = Math.min(Math.floor(ratio * colors.length), colors.length - 1)
    return colors[colorIndex]
}

</script>

<style scoped>
/* 标签云容器样式 */
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
    min-height: 200px;
    position: relative;
    margin: 0 auto;
    max-width: 70%;
}

/* 淡入动画 */
.fade-in {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    animation: fadeIn 0.8s ease-out forwards;
}

@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 背景标签浮动动画 */
@keyframes float {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    50% {
        transform: translate(-50%, -60%) scale(1.05) rotate(2deg);
    }
}

/* 悬停交互效果增强 */
.tag-cloud > div {
    position: relative;
    z-index: 1;
}

.tag-cloud > div:hover {
    z-index: 10;
    filter: brightness(1.1);
}
</style>
